import React from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation, Link } from 'react-router-dom';
import Home from './page/home/home';
import PrinterList from './page/printer-list/printer-list';
import PrinterDetail from './page/printer-detail/printer-detail';
import PrinterAdd from './page/printer-add/printer-add';
import './App.css';

const AppContent: React.FC = () => {
  const location = useLocation();
  const isHomePage = location.pathname === '/';

  return (
    <div className={isHomePage ? 'App' : 'app'}>
      {!isHomePage && (
        <header className="app-header">
          <div className="header-content">
            <div className="logo">OEasy Printer</div>
            <nav className="main-nav">
              <Link to="/" className="nav-link">主页</Link>
              <Link to="/printers" className="nav-link">打印机列表</Link>
            </nav>
          </div>
        </header>
      )}
      <main className={isHomePage ? undefined : "app-content"}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/printers" element={<PrinterList />} />
          <Route path="/printer/add" element={<PrinterAdd />} />
          <Route path="/printer/:id" element={<PrinterDetail />} />
        </Routes>
      </main>
      {!isHomePage && (
        <footer className="app-footer">
          <p>© 2023 - {new Date().getFullYear()} 欧亦赛科技有限公司 版权所有 | 打印机管理系统 v1.0.0</p>
        </footer>
      )}
    </div>
  );
};

const App: React.FC = () => {
  return (
    <Router>
      <AppContent />
    </Router>
  );
};

export default App;
